<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<div class="modal-dialog" role="document" style="width:450px">
    <div class="modal-content">
        <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel"
                style="display: inline-block">传智播客 ▪ 人脸识别</h4>
            <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div class="modal-body-title">
                <!--头部提示文字-->
                <p>请将头部放在视频区域内,匹配成功将会自动登入系统</p>
                <p>
                    如果视频内未出现识别框或长时间未响应 <a style="cursor: pointer">请单击此处</a>
                </p>
            </div>
            <!--人脸框-->
            <div class="modal-body-viode">
                <canvas id="canvas" style="display:none;"></canvas>
                <video id="video" width="420" height="340" preload autoplay loop muted></video>
            </div>
        </div>
        <form method="post" id="faceForm" action="/faceLogin.do">
            <input type="hidden" id="face-image" name="images">
        </form>
    </div>
</div>

<script>

    var videoPlaying = false;
    let v = document.getElementById('v');
    !(function () {
        // 老的浏览器可能根本没有实现 mediaDevices，所以我们可以先设置一个空的对象
        if (navigator.mediaDevices === undefined) {
            navigator.mediaDevices = {};
        }
        if (navigator.mediaDevices.getUserMedia === undefined) {
            navigator.mediaDevices.getUserMedia = function (constraints) {
                // 首先，如果有getUserMedia的话，就获得它
                var getUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

                // 一些浏览器根本没实现它 - 那么就返回一个error到promise的reject来保持一个统一的接口
                if (!getUserMedia) {
                    return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
                }

                // 否则，为老的navigator.getUserMedia方法包裹一个Promise
                return new Promise(function (resolve, reject) {
                    getUserMedia.call(navigator, constraints, resolve, reject);
                });
            }
        }

        let promise = navigator.mediaDevices.getUserMedia({video: true,audio: false});

        promise.then(stream => {
            let v = document.getElementById('video');
        // 旧的浏览器可能没有srcObject
        if ("srcObject" in v) {
            v.srcObject = stream;
        } else {
            // 防止再新的浏览器里使用它，应为它已经不再支持了
            v.src = window.URL.createObjectURL(stream);
        }
        v.onloadedmetadata = function (e) {
            v.play();
            videoPlaying = true;
        };
    }).catch(err => {
            console.error(err.name + ": " + err.message);
    })
    })();

    setInterval(realTimeCl, 5000);

    function realTimeCl() {
        if (videoPlaying) {
            var video = document.getElementById('video');
            var canvas = document.getElementById('canvas');
            canvas.width = video.videoWidth;
            canvas.height = video.videoHeight;
            canvas.getContext('2d').drawImage(video, 0, 0);
            var data = canvas.toDataURL('image/webp');
            data = data.substr(23);
            //alert(data);

            //document.getElementById('photo').setAttribute('src', data);
            $("#face-image").val(data);
            $("#faceForm").submit();
        }
    }
</script>
</body>
</html>